<template>
	<view class="box">
		<view class="topBox" v-if="isLogin"><!-- 最上面的盒子 -->
			<view class="leftBox">
				<image src="@/static/img/lv.jpg" mode="" class="image"></image>
				<text class="name">星河</text>
			</view>
			<view class="text">签到</view>
		</view>

		<view class="topBox" v-else><!-- 最上面的盒子 -->
			<view class="leftBox">
				<image src="@/static/img/wode.png" class="image"></image>
				<text class="name" @click="isLogin = true">点击登录</text>
			</view>
		</view>

		<navigator url="/subPages/my/balance/balance" class="boxs" v-if="isLogin"> <!-- 爱心余额 -->
			<view class="leftBoxs">
				<image src="@/static/img/yue.png" mode="" class="img"></image>
				<text>爱心余额</text>
			</view>
			<view class="symbol">></view>
		</navigator>
		<view class="boxs" v-if="isLogin"> <!-- 我的订单 -->
			<view class="leftBoxs">
				<image src="@/static/img/gouwuche.png" mode="" class="img"></image>
				<text>我的订单</text>
			</view>
			<view class="symbol">></view>
		</view>
		<view class="boxs"> <!-- 问题反馈 -->
			<view class="leftBoxs">
				<image src="@/static/img/kefu.png" mode="" class="img"></image>
				<text>问题反馈</text>
			</view>
			<view class="symbol">></view>
		</view>
		<view class="boxs"> <!-- 常见问题 -->
			<view class="leftBoxs">
				<image src="@/static/img/changjianwenti.png" mode="" class="img"></image>
				<text>常见问题</text>
			</view>
			<view class="symbol">></view>
		</view>
		<view class="boxs" v-if="isLogin"> <!-- 餐厅设置 -->
			<view class="leftBoxs">
				<image src="@/static/img/shezhi.png" mode="" class="img"></image>
				<text>餐厅设置</text>
			</view>
			<view class="symbol">></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
			}
		},
		methods: {

		}
	}
</script>

<style>
	.image {
		height: 20vw;
		width: 20vw;
	}

	.img {
		height: 8vw;
		width: 8vw;
		padding-right: 4vw;
	}

	.topBox,
	.boxs,
	.leftBoxs,
	.leftBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.topBox {
		height: 60vw;
		background-color: #fe4b63;
		padding: 0 5vw;
	}

	.image {
		border-radius: 50%;
	}

	.name,
	.text {
		color: #fff;
	}

	.name {
		font-size: 6vw;
		padding-left: 3vw;
	}

	.text {
		border: 3px solid #fff;
		width: 10vw;
		height: 6vw;
		text-align: center;
	}

	.boxs {
		height: 25vw;
		border-bottom: 1px solid #f4f4f4;
		margin: 0 5vw;
	}

	.symbol {
		color: #abaebc;
		font-size: 25px;
		margin-right: 2vw;
		font-weight: bold;
	}
</style>